<template>
    <div>
        

  <input type="button" @click="search()" value="dianji ">

 <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="主健"
      width="150">
    </el-table-column>
    <el-table-column
      prop="username"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="password"
      label="口令"
      width="120">
    </el-table-column>
    <el-table-column
      prop="nickname"
      label="昵称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="birthday"
      label="生日"
      width="300">
    </el-table-column>
    <el-table-column
      prop="gender"
      label="性别"
      width="120">
    </el-table-column>

    <el-table-column
      prop="locked"
      label="锁定"
      width="120">
    </el-table-column>





    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="danger" size="small" @click="deleteByid(scope.row.id)">删除</el-button></el-button>

      </template>
    </el-table-column>
  </el-table>

<el-button type="text" @click="handAdd()">打开嵌套表单的 Dialog</el-button>

 
 <el-dialog title="收货地址" :visible.sync="dialogFormVisible">

  <el-form :model="form">

    
      <el-form-item label="id" :label-width="formLabelWidth">
      <el-input v-model="form.id" autocomplete="off"></el-input>
    </el-form-item>


    <el-form-item label="名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>

   <el-form-item label="密码" :label-width="formLabelWidth">
      <el-input v-model="form.password" autocomplete="off" show-password></el-input>

    </el-form-item>
    <el-form-item label="昵称" :label-width="formLabelWidth">
      <el-input v-model="form.nickname" autocomplete="off"></el-input>
    </el-form-item>

   <el-form-item label="生日" :label-width="formLabelWidth">

    <el-date-picker
      v-model="form.birthday"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>

    </el-form-item>
    

    <el-form-item label="性别" :label-width="formLabelWidth">
    <template>
        <el-radio v-model="form.gender" label="1">男</el-radio>
        <el-radio v-model="form.gender" label="0">女</el-radio>
        </template>

   </el-form-item>


    <el-form-item label="是否锁定" :label-width="formLabelWidth">
    <template>
        <el-radio v-model="form.locked" label="1">锁定</el-radio>
        <el-radio v-model="form.locked" label="0">不锁定</el-radio>
        </template>

   </el-form-item>



 
    <el-form-item label="角色" :label-width="formLabelWidth">
      <el-select v-model="form.role" placeholder="请选择活动区域">
        <el-option label="学生" value="0"></el-option>
        <el-option label="老师" value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="URL" :label-width="formLabelWidth">

    <el-input placeholder="请输入内容" v-model="form.url">
     <template slot="prepend">Http://</template>
    </el-input>
  </el-form-item>

  
  
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>


 
 
 </div>
</template>

<script>

import axios from 'axios'
export default {
    methods: {

      handAdd(){
       this.form = {};
       this.dialogFormVisible = true ;
       
      }  
      ,
      handleClick(row) {
        console.log(row);
      },
      deleteByid(row){
       axios.delete(this.$baseUrl+'cmsnew/'+row)
       .then(res=>{
           //刷新页面
           this.search();
       })
      
      },
      search(){
          axios.post(this.$baseUrl+'/cms/getuser')
        .then(res=>{
            this.tableData = res.data.data ;
            console.log(this.tableData);

        })

      }
    },
    
    data(){
        return {
           tableData:[] ,
          //   dialogTableVisible: false,
           dialogFormVisible: false,
           form: {
          username: '',
          password: '',
          nickname: '',
          birthday: '2022-09-09',
          gender: 0,
          locked: 0,
          url: '',
          id: 0
        }
    

        }

    },
    created() {
        this.search();
        
    },


}
</script>
